import React, { Component ,useEffect,useContext} from 'react'
// import {inject,observer} from 'mobx-react';
import Count from './components/count';
import CarContext from './context/index';
import {observer} from 'mobx-react-lite';

// @inject('Car')
// @observer
// class App extends Component {
    
//     componentDidMount() {
//         this.props.Car.getShopList();
//     }
    
//     render() {
//         console.log(this.props.Car.list);
//         return (
//             <div>
//                 {/* 价格：{this.props.Sum.price}

//                 数量：{this.props.Sum.count}

//                 总价：{this.props.Sum.total} */}
//                 {
//                     this.props.Car.list.map((item,key)=>{
//                         return (
//                             <div key={key}>
//                                 <h2>{item.title}</h2>
//                                 <p>price：{item.price}</p>
//                                 <Count id={key} count={item.count}></Count>
//                             </div>
//                         )
//                     })
//                 }

//                 总价格：{this.props.Car.total}
//             </div>
//         )
//     }
// }
// export default  App


function App(){
    const {Car} = useContext(CarContext);
    useEffect(() =>{
        Car.getShopList();
    },[])
    return (
            <div>
                {/* 价格：{this.props.Sum.price}

                数量：{this.props.Sum.count}

                总价：{this.props.Sum.total} */}
                {
                    Car.list.map((item,key)=>{
                        return (
                            <div key={key}>
                                <h2>{item.title}</h2>
                                <p>price：{item.price}</p>
                                <Count id={key} count={item.count}></Count>
                            </div>
                        )
                    })
                }

                总价格：{Car.total}
            </div>
    )
}

export default observer(App);